@import "../common/size";

.detail-page{
   background: #fff;
   flex:1;

  .color-green{
    color: $themeColor;
  }

   .content{
     flex:1;
     padding:0 10px;

     .title{
         padding: 20px  0;
         border-bottom: 1px solid #ececec;
         margin-bottom: 15px;
        .title-text{
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
        }

        .show-item{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #888;
          margin-top: 10px;
          .item:first-child{
            margin-right: 10px;
          }
        }
     }

     .user-info{
        display: flex;
        margin: 10px 0;

       .tag{
         font-size: 14px;
         color: #888;
         display: flex;
         align-items: center;
       }
     }

     .user-avator{
         width: 50px;
         height: 50px;
         border-radius: 25px;
         border: 1px solid #ececec;
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
     }

     .user-name{
       flex: 1;
       font-size: 12px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding-left: 6px;

       .name {
         color: $themeColor;
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 4px;
       }

       .time{
         color: #666;
         margin-top: 8px;
       }
     }

     .comment{
       margin: 0 -10px;

       .comment-head{
         border-top: 1px solid #ececec;
         border-bottom: 1px solid #ececec;
         border-left: 6px solid $themeColor;
         padding: 10px 10px;
         font-size: 14px;
         color: #333;
         display: flex;
         justify-content: space-between;
       }

       .comment-list{
         padding: 0 10px;

         .list{
           padding: 15px 0;
           border-bottom: 1px solid #ececec;
         }

         .user-top{
           display: flex;
         }

         .avator{
           width: 40px;
           height: 40px;
           border-radius: 20px;
           background-position: center center;
           background-repeat: no-repeat;
           background-size: cover;
           border: 1px solid #ececec;
         }

         .info{
           flex:1;
           padding-left: 10px;
         }

         .nick-name{
           flex:1;
           display: flex;
           flex-direction: column;
           justify-content: center;
           font-size: 14px;
           color: #333;
           padding-left: 10px;
           .time{
             color: #888;
             font-size: 12px;
             margin-top: 6px;
           }
         }

         .markdown-body{
           font-size: 15px;
           margin-top: 10px;
         }

         .set{
           display: flex;
           font-size: 14px;

           .left-fill{
             flex: 1;
           }

           .icon{
            color: #666;
           }

           .icon.color-green{
             color: $themeColor;
           }

         }

       }


     }

     .comment_input{
       margin-bottom: 10px;
       display: flex;
       height: 39px;

       input[type="text"]{
         flex:1;
         border: 1px solid #ccc;
         border-radius: 4px;
         padding: 0 6px;
       }

       button{
         height: 100%;
         width: 80px;
         background: $themeColor;
         color: #fff;
         border-radius: 4px;
         margin-left: 10px;
       }

     }

   }

  .comment-box {
    width: 100%;
    position: absolute;
    bottom:0;
    left: 0;
    z-index: 2;
    background: #fff;
    padding: 20px 10px;
    border-top: 2px solid $themeColor;
    .comment-t{
      display: block;
      border-radius: 4px;
      border: 1px solid #ccc;
      width: 100%;
      height: 120px;
      overflow: hidden;
      padding: 10px;
    }

    textarea{
      padding: 0;
      margin: 0;
      outline: none;
      resize: none;
      width: 100%;
      height: 100%;
      border: none;
    }

    button{
      width: 100px;
      height: 39px;
      color: #fff;
      background: $themeColor;
      border-radius: 4px;
      margin-top: 20px;
      float: right;
    }
  }

}

